<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";
import request from "@/common/utils/request";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({

});

const emit = defineEmits(["handleOk"]);
const dialog = ref(null);

const showModal = () => {
  dialog.value.showModal();
  init();
};

const closeModal = () => {
  dialog.value.closeModal();
};

// 确认提交
const handleOk = () => {
  emit("handleOk");
  dialog.value.closeModal();
};

const dataSource = ref([]);
const columns = ref([
  {
    title: "功能",
    dataIndex: "label",
    key: "label",
    align: "center",
  },
  {
    title: "消耗明细",
    dataIndex: "value",
    key: "value",
    align: "center",
  },
  {
    title: "说明",
    dataIndex: "desc",
    key: "desc",
    align: "left",
  },
]);
const currentPoint = ref(0);
const point_coin_unit = ref("");
const point_coin_alias = ref("");
const packagePrompt = ref("");

const init = async () => {
  const res = await request.get(
    "/work_ai",
    "/user/consume/consumptionPoint/rule",
    {
       isShotStack : "1"
    }
  );

  dataSource.value = res.result.content;
  currentPoint.value = res.result.currentPoint;
  point_coin_unit.value = res.point_coin_unit;
  point_coin_alias.value = res.point_coin_alias;
  packagePrompt.value = res.result.packagePrompt;
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :contentWidth="900">
      <template #title>
        <div>
          <span style="font-weight: 600">消耗规则</span>
        </div>
      </template>
      <template #content>
        <div class="content">
          <div class="content_title">
            <div class="content_left">
              <span style="margin-right: 5px"> 当前剩余: </span>
             <span style="font-size:large">{{ currentPoint }}</span> {{ point_coin_unit }}{{ point_coin_alias }} 
            </div>

            <div class="content_right">
              <div class="content_T">
                {{ packagePrompt }}
              </div>
            </div>
          </div>

          <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
            <!-- <template #bodyCell="{ column, record }"> </template> -->
          </a-table>
        </div>
      </template>
      <template #footer>
        <div></div>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.content {
  width: 100%;
  padding: 10px 20px 0px 20px;
  height: 700px;
  overflow: auto;
}
.content_title {
  text-align: center;
  
  margin-bottom: 20px;
  .content_left {
    width: 100%;
  }

  .content_right {
    width: 100%;
  }
}
</style>
